{template 'header'}
    <link rel="stylesheet" href="{MODULE_URL}assets/css/pic_look.css">
    <style>
        .up_loader_text{
            background: #fff;
            margin-top: -10px;
            padding-top: 10px;
            padding-bottom: 5%;
        }
        .text_red{
            color: #dd524d;
            margin: 10px;
        }
        .case img{
            width: 100%;
        }
        .case div{
            padding: 10px;
        }
        #uploadForm{
            text-align: center
        }
        #uploadForm img{
            border: dashed 2px #d7d7d7;
        }
        #uploadForm .hied_input{
            display: none;
            position: fixed;
            top: -99999999999px;
        }
        #uploadForm div{
            padding: 10px;
        }
        .mui-btn{
            margin-bottom: 20px !important;
        }
    </style>
</head>
<body>
<div class="mui-content">
    <!-- 要求文本开始 -->
    <div class="up_loader_text">
        <div class="mui-content-padded">
            <p>要求:</p>
            {loop $setting['detail'] $item}
            <p>{$item}</p>
            {/loop}
        </div>
    </div>
    <!-- 要求文本结束 -->
    <!-- 样例开始 -->
    <div class="mui-row case">
        <p class="text_red">样例：</p>
        <div class="mui-col-sm-6 mui-col-xs-12">
            <img src="{$setting['thumb1']}" class="mui-media-object">
        </div>
    </div>
    <!-- 样例结束 -->
    <!-- 上传模块开始 -->
    <div>
        <p>上传凭证：</p>
        <form id='uploadForm' enctype="multipart/form-data" class="mui-row" onsubmit="return false">
            <div class="mui-col-sm-6 mui-col-xs-6" >
                <img src="{MODULE_URL}assets/img/pic_img.png" class="mui-media-object"  id="pic1">
            </div>
            <div class="mui-col-sm-6 mui-col-xs-6">
                <img src="{MODULE_URL}assets/img/pic_img.png" class="mui-media-object" id="pic2">
            </div>
            <input type="file" name="uploader_pic1" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"  class='hied_input' id="pick_img1">
            <input type="file" name="uploader_pic2" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"  class='hied_input' id="pick_img2">
            <input type="submit" value="上传图片" class="mui-btn mui-btn-primary mui-btn-block" id="uploader_btn">
        </form>
    </div>
    <!-- 上传模块结束 -->
</div>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<!-- 以上为引入第三方插件 -->
<!-- trigger('clcik') -->
<script>
    //点击图片上传
    var pic1 = null
    var pic2 = null
    $('#pic1').click(function(e){
        $('#pick_img1').click();
        $('#pick_img1').on("change",function(){
            $('#pic1').attr("style", "width:100%;height:18rem;border:none;");
            pic1 = URL.createObjectURL(event.target.files[0]);
            $('#pic1').attr("src", URL.createObjectURL(event.target.files[0]));
        });
    });
    $('#pic2').click(function(e){
        $('#pick_img2').click();
        $('#pick_img2').on("change",function(){
            $('#pic2').attr("style", "width:100%;height:18rem;border:none;");
            pic2 = URL.createObjectURL(event.target.files[0])
            $('#pic2').attr("src", URL.createObjectURL(event.target.files[0]));
        });
    });
    //使用axja 上传
    $("#uploader_btn").click(function(){
        console.log(pic1)
        if($('#pick_img1').val() != '' && $('#pick_img2').val() != ''){
            var formData = new FormData($('#uploadForm')[0]); //处理为fromData
            console.log(formData);
            $.ajax({
                url: '{php echo $this->createMobileUrl("core",["op"=>"faquan_submit","extra"=>"upload"])}',
                type: 'POST',
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                // 成功
                success: function(data) {
                    // if (data.status_code == 500) {
                    //     mui.alert("上传失败，点击图片重新选择");
                    // } else if (data.status_code == 400) {
                    //     mui.alert('请选择正确的图片类型');
                    // } else {
                    //     mui.alert('上传成功')
                    // }
                    console.log(data)
                }
            })
        }else{
            mui.alert('请选择两张图片')
            return false
        }
    });
</script>
</body>
</html>